/* ==========================================================
   RESPONSIVE - NOSOTROS (MEJORADO)
   Objetivo:
   - Quitar márgenes fijos/negativos que rompen el layout
   - Mantener header bonito (logo + menú)
   - Texto + imagen en tablet / apilado en móvil
   - Footer sin bordes raros y bien alineado
========================================================== */

/* Evita scroll lateral por márgenes negativos */
html, body{
  overflow-x: hidden;
}

/* -----------------------------
   TABLET / LAPTOP PEQUEÑO
------------------------------ */
@media (max-width: 992px){

  /* HEADER */
  .header{
    height: auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .logo{
    width: 220px;
    height: auto;
    margin: 0 !important;
  }

  .barnav{
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .menu{
    width: auto !important;
    height: auto;
    margin: 0 !important;
  }

  .barnav a{
    white-space: nowrap;
    font-size: 14px;
  }

  /* CONTENIDO (FONDO NEGRO) */
  .container{
    margin-left: 0 !important;
    height: auto !important;
    padding: 40px 0 50px;
  }

  .title-contact{
    margin: 0 0 24px 0 !important;
    padding: 0 16px;
    text-align: center !important;
    font-size: 2em;
  }

  .about-grid{
    width: min(1100px, 92%);
    margin: 0 auto !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 20px;
    align-items: start;
  }

  .about-text{
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.55;
    font-size: 15px;
  }

  .values-list{
    margin: 10px 0 0 0;
    padding-left: 18px; /* para que los bullets se vean bien */
  }

  .about-media{
    justify-content: center;
  }

  .card{
    margin: 0 auto !important;
    padding: 0 !important;
    max-width: 520px;
    width: 100%;
    border-radius: 14px;
  }

  .card-img{
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    height: auto;
    display: block;
  }

  /* SIG */
  .sig{
    padding: 45px 16px;
  }

  .sig-title{
    font-size: 34px;
    padding: 0 12px;
  }

  .sig-actions{
    gap: 18px;
  }

  .sig-btn{
    white-space: normal; /* permite saltar línea si es largo */
    width: min(520px, 100%);
  }

  /* FOOTER */
  .footer{
    height: auto !important;
    padding: 24px 16px 12px;
  }

  .footer-grid{
    margin: 0 !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
  }

  .footer h4{
    margin: 0 0 10px 0 !important; /* quita el margin-top negativo */
  }

  .footer-logo{
    height: 150px;
    margin: 0 auto !important;
    display: block;
  }

  .container-footer1{
    margin-top: 12px;
    text-align: center;
  }

  .small{
    margin: 0 !important;
    display: block;
    text-align: center;
  }
}


/* -----------------------------
   CELULAR / TABLET PEQUEÑA
------------------------------ */
@media (max-width: 768px){

  /* HEADER: logo arriba + menú abajo (horizontal, con wrap) */
  .header{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .barnav{
    justify-content: center;
  }

  /* CONTENIDO: se apila */
  .about-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .about-text{
    text-align: left; /* en móvil se lee mejor */
  }

  .card{
    max-width: 560px;
  }

  /* SIG botones en columna */
  .sig-actions{
    flex-direction: column;
    align-items: center;
  }

  .sig-btn{
    width: min(420px, 100%);
  }

  /* FOOTER: 1 columna centrada */
  .footer-grid{
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .footer a{
    margin-left: 0 !important;
  }
}


/* -----------------------------
   CELULAR PEQUEÑO
------------------------------ */
@media (max-width: 520px){

  .logo{
    width: 200px;
  }

  .barnav a{
    font-size: 13px;
  }

  .title-contact{
    font-size: 1.7em;
  }

  .sig-title{
    font-size: 28px;
  }

  .sig-btn{
    font-size: 14px;
    padding: 14px 16px;
  }
}